<template>
  <div class="Home">
    <el-container>
      <el-header>
        <div>
          <span>我的博客后台管理系统</span>
        </div>
        <el-dropdown @command="handleCommand" style="color: #fff;">
          <span class="el-dropdown-link">
            嗨！
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">作者信息</el-dropdown-item>
            <el-dropdown-item command="b">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#333744"
            text-color="#fff"
            router
            active-text-color="#409BFF"
          >
            <el-submenu index="1" v-if="userInfo.isAdmin">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item>
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span @click="toUserList">用户列表</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="2" v-if="userInfo.isAdmin">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>分类管理</span>
              </template>
              <el-menu-item>
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span @click="tocategory">分类列表</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>文章管理</span>
              </template>
              <el-menu-item v-if="userInfo.isAdmin">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span @click="toAllArcticle">所有文章</span>
                </template>
              </el-menu-item>
              <el-menu-item>
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span @click="toMyArticle">我的文章</span>
                </template>
              </el-menu-item>
              <el-menu-item v-if="userInfo.isAdmin">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span @click="toAwaitCheck">待审核文章</span>
                </template>
              </el-menu-item>
              <el-menu-item>
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span @click="toWriteArticle">写文章</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import jwt_decode from 'jwt-decode'
export default {
  name: 'Home',
  data() {
    return {
      userInfo: []
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      const token = window.sessionStorage.getItem('token')
      var decoded = jwt_decode(token)
      console.log(decoded)
      this.userInfo = decoded
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    handleCommand(command) {
      if (command == 'a') {
        console.log('作者信息')
        return false
      }
      if (command == 'b') {
        window.sessionStorage.removeItem('token')
        this.$router.push({ name: 'Login' })
      }
    },
    toUserList() {
      this.$router.push({ name: 'UserList' })
    },
    tocategory() {
      this.$router.push({ name: 'Category' })
    },
    toWriteArticle() {
      this.$router.push({ name: 'WriteArticle' })
    },
    toAllArcticle() {
      this.$router.push({ name: 'AllArcticle' })
    },
    toMyArticle() {
      this.$router.push({ name: 'MyArticle' })
    },
    toAwaitCheck() {
      this.$router.push({ name: 'AwiatCheck' })
    }
  }
}
</script>
<style scoped>
.Home {
  height: 100%;
}
.Home > section {
  height: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
.el-header > div {
  display: flex;
  align-items: center;
}
.el-header > div > span {
  padding-left: 15px;
}
.el-aside {
  background-color: #333744;
}
.el-main {
  background-color: #eaedf1;
}
.el-menu {
  border-right: none !important;
}
</style>